<template>
	<a-tabs default-active-key="styles" size="small">
		<a-tab-pane key="styles" :tab="i18n('componentStyle.style','风格')">
			<!--标题和边框基础风格-->
			<component-style :curComponent="curComponent"></component-style>
			<!--视频数据风格-->
			<a-row>
				<a-col :span="12">
					<a-form-item :label="videoI18n('auto','自动播放')">
						<a-switch size="small" default-checked v-model:checked="config.dataSources.auto"/>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item :label="videoI18n('loop','循环播放')">
						<a-switch size="small" default-checked v-model:checked="config.dataSources.loop"/>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row>
				<a-col :span="24">
					<a-form-item :label="videoI18n('uploadVideo','上传视频')">
						<a-upload
								  download="download"
								  :multiple="true"
								  :showUploadList="false"
								  :beforeUpload="beforeUpload"
								  @preview="picPreviews"
						>
							<a-button style="width: 400px">
								<i class="iconfont iconshangchuan" style="margin-right: 5px;"></i>
								{{videoI18n('uploadVideo','上传视频')}}
							</a-button>
						</a-upload>
						<div v-if="config.dataSources.videoId" class="upload-preview">
							<div class="upload-preview-name">{{config.dataSources.videoName}}</div>
							<div class="upload-preview-delete" @click="handleRemove"><rx-icon-show icon="icon-lineVue3_delete"/></div>
						</div>
					</a-form-item>
				</a-col>
			</a-row>
		</a-tab-pane>
	</a-tabs>
</template>

<script>
/*
视频控件
 */
import ComponentDef from "@/views/modules/design/right-component/common/component-def.js";
import ScreenApi from "@/api/screen-api";
export default {
	name: "VideoDef",
	mixins:[ComponentDef],
	data(){
		return{
		}
	},
	created() {
	},
	methods: {
		i18n(name, text, key) {
			return this.$ti18(name, text, "componentStyleLang", key);
		},
		videoI18n(name, text, key) {
			return this.$ti18(name, text, "videoLang", key);
		},
		async picPreviews(file) {
			if (!file.url && !file.preview) {
				file.preview = await this.getBase64(file)
			}
		},
		getBase64(file) {
			return new Promise((resolve, reject) => {
				const reader = new FileReader()
				reader.readAsDataURL(file)
				reader.onload = () => resolve(reader.result)
				reader.onerror = error => reject(error)
			})
		},
		//上传
		beforeUpload(file) {
			let type = (file.type).split("/")[0];
			if(type!='video'){
				this.$message.warning(this.videoI18n('video','只能上传视频'))
				return
			}
			let timestamp = new Date().getTime();
			let formdata = new FormData();
			formdata.append('files', file);
			formdata.append("time", timestamp);
			let self = this;
			ScreenApi.upload(formdata).then(res => {
				if(res.data[0]){
					this.config.dataSources.videoId = res.data[0].fileId;
					this.config.dataSources.videoName = res.data[0].fileName;
				}
			})
		},
		//删除
		handleRemove(file) {
			this.config.dataSources.videoId ='';
			this.config.dataSources.videoName ='';
		},
	}
}
</script>

<style scoped>
.upload-preview{
	display: flex;
	align-items: center;
}
.upload-preview-name{
	font-size: 14px;
	flex: 1;
	color: #333333;
	overflow: hidden;
	margin-right: 10px;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.upload-preview-delete{
	width: 30px;
	height: 30px;
	background: #ff3d3d;
	border-radius: 50%;
	text-align: center;
	line-height: 30px;
	color: white;
}
</style>
